define(function (require, exports, module) {    
  var PDFDocView= require("./PDFDocView");       
  var SideBar = require("./SideBar"); 
  var StatusBar = require("./StatusBar"); 
  var Environment = require("../Environment")
  var LayoutInfo = require('./LayoutInfo');
    
  var MainView = function(mainFrameID, pdfDoc, pageViewRender, readerApp){   
      
        this.pdfDoc = pdfDoc;
        this.pageViewRender = pageViewRender;
        this.readerApp = readerApp;       
        this.el = "#" + mainFrameID;
        this.mainFrameID = mainFrameID;
        this.leftPanelID = mainFrameID + "_LeftPanel";
        return new MainViewInner(this);
  }; 
    
  var MainViewInner = Backbone.View.extend({
    initialize : function(){                  
        _.bindAll(this, "onResize");        
        this.layoutInfo = new LayoutInfo();        
        
        this.docView = new PDFDocView(this.pdfDoc, this.pageViewRender, this.$el.attr("Id"),this.layoutInfo, this.readerApp);       
        this.sidebar = new SideBar({model: {width: 200}});                   
        this.docView.setDocViewWidth(this.$el.width());
        this.docView.setDocViewHeight(this.$el.height());
       // this.statusbar = new StatusBar({model: {height: 30}});          

        this.render();
        $(window).on("resize", _.debounce(this.onResize, 100));          
        MainView.add(this);
    },           
    events : {

    },

    attributes : {
      "class" : "fwr-doc-viewer"
    },
      
    
    onResize: function(){         
        var param = {};
        var mainViewWidth = this.$el.width();
        var mainViewHeight = this.$el.height();    
        param.sidebar_width = this.sidebar.width();           

        var sideBarWidth = this.sidebar.$el.is(":hidden") ? 0 : this.sidebar.$el.width();
        this.sidebar.$el.height(param.width);    
        var docViewWidth = mainViewWidth - sideBarWidth;
        var docViewHeight = mainViewHeight;
        var docViewOffsetLeft = sideBarWidth;
        var docViewOffsetTop = 0;            

        //check whether the size of doc view has been changed.
        if (docViewWidth=== this.docView.getDocViewWidth() 
            && docViewHeight === this.docView.getDocViewHeight()
            && docViewOffsetLeft === this.docView.getDocViewOffsetLeft() 
            && docViewOffsetTop === this.docView.getDocViewOffsetTop()){
            return;
        }
        
        this.docView.onSize(docViewWidth, docViewHeight, docViewOffsetLeft, docViewOffsetTop);            
     },

    render: function(){     
        this.$el.append(this.sidebar.render().el);
        this.sidebar.render().$el.hide();
        //this.$el.append(this.toolbar.render().el);
       // this.$el.append(this.statusbar.render().el);
        this.$el.append(this.docView.render().el);
        this.onResize();

        if (Environment.mobile) {
            this.$el.addClass("fwr_main_frame_wnd_wap");            
        }
        return this;
    },            
    /**
     * @description Get the doc view.
     * @return {WebPDF.PDFView.PDFDocView} Doc view object.
     */
    getDocView : function () {
      return this.docView;
    },
     /**
     * @description Get the ID of the mainframe div.
     * @return {String} ID of the mainframe div.
     */
    getMainFrameID : function () {
        return this.mainFrameID;
    },
    /**
     * @description Get the ID of the navigation panel div.
     * @return {String} ID of the navigation panel div.
     */
    getLeftPanelID : function () {
        return this.leftPanelID;
    },
    active: function(callback){
        (typeof callback == "function") ? this.on("active", callback) : this.trigger("active");
        return this;
    },
    isActive: function(){
        return this.$(el).hasClass("active");
    },

    activate: function(){       
      this.$el.addClass("active");
      return this;
    },

    deactivate: function(){      
      this.$el.removeClass("active");
      return this;
    }
})
  
   

 
    // Class method
   _.extend(MainView, {
     add: function(mainView){
        if ( !mainView ) throw("MainView required");

        MainView.on("change", function(current){
          MainView.current = current;
          if (mainView == current)
            mainView.activate();
          else
            mainView.deactivate();
        });

        mainView.active(function(){
          MainView.trigger("change", mainView);
        });
      }  
  }, Backbone.Events);   


module.exports = MainView;
});